<template>
  <div class="p-4">
    <h1 class="text-2xl font-bold mb-6">UnoCSS 图标演示</h1>
    
    <el-card class="mb-4">
      <template #header>
        <div class="flex items-center gap-2">
          <div class="i-carbon-information text-blue-500"></div>
          <span>基本用法</span>
        </div>
      </template>
      <div class="p-2">
        <p class="mb-4">UnoCSS图标使用 <code class="bg-gray-100 p-1 rounded">i-[collection]-[icon]</code> 格式命名</p>
        
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4">
          <div v-for="icon in basicIcons" :key="icon" class="flex-center flex-col border p-2 rounded hover:bg-gray-50">
            <div :class="`i-carbon-${icon} text-2xl mb-2`"></div>
            <div class="text-xs">i-carbon-{{ icon }}</div>
          </div>
        </div>
      </div>
    </el-card>
    
    <el-card class="mb-4">
      <template #header>
        <div class="flex items-center gap-2">
          <div class="i-carbon-color-palette text-purple-500"></div>
          <span>颜色控制</span>
        </div>
      </template>
      <div class="p-2">
        <p class="mb-4">通过添加颜色类来改变图标颜色</p>
        
        <div class="flex flex-wrap gap-4 mt-4">
          <div v-for="color in colors" :key="color.name" class="flex-center flex-col border p-2 rounded hover:bg-gray-50">
            <div :class="`i-carbon-star-filled text-2xl mb-2 ${color.class}`"></div>
            <div class="text-xs">{{ color.name }}</div>
          </div>
        </div>
      </div>
    </el-card>
    
    <el-card>
      <template #header>
        <div class="flex items-center gap-2">
          <div class="i-carbon-resize text-green-500"></div>
          <span>尺寸控制</span>
        </div>
      </template>
      <div class="p-2">
        <p class="mb-4">图标尺寸可以通过文本大小或宽高类控制</p>
        
        <div class="flex flex-wrap gap-8 mt-4 items-end">
          <div v-for="size in sizes" :key="size.name" class="flex-center flex-col">
            <div :class="`i-carbon-user ${size.class} mb-2`"></div>
            <div class="text-xs">{{ size.name }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
const basicIcons = [
  'home',
  'search',
  'user',
  'settings',
  'notification',
  'email',
  'calendar',
  'document',
  'cloud',
  'star',
  'warning',
  'add'
]

const colors = [
  { name: '默认', class: '' },
  { name: '主色', class: 'text-primary' },
  { name: '蓝色', class: 'text-blue-500' },
  { name: '绿色', class: 'text-green-500' },
  { name: '红色', class: 'text-red-500' },
  { name: '黄色', class: 'text-yellow-500' },
  { name: '紫色', class: 'text-purple-500' }
]

const sizes = [
  { name: '超小', class: 'text-xs' },
  { name: '小', class: 'text-sm' },
  { name: '默认', class: 'text-base' },
  { name: '大', class: 'text-xl' },
  { name: '超大', class: 'text-2xl' },
  { name: '特大', class: 'text-4xl' }
]
</script> 